<template>
  <div class="name-generator">
    <h1>智能姓名生成器</h1>
    
    <div class="input-section">
      <input 
        v-model="surname" 
        type="text" 
        placeholder="请输入姓氏"
        class="surname-input"
      >
      <div class="gender-select">
        <label>
          <input type="radio" v-model="gender" value="male"> 男
        </label>
        <label>
          <input type="radio" v-model="gender" value="female"> 女
        </label>
      </div>
      <button @click="generateName" class="generate-btn">
        <i class="fas fa-magic"></i> 生成名字
      </button>
    </div>

    <div v-if="generatedNames.length" class="result-section">
      <h2>推荐名字:</h2>
      <div v-for="(name, index) in generatedNames" :key="index" class="name-card">
        <div class="name-display">{{ surname + name.characters }}</div>
        <div class="name-score">评分: {{ name.score }}分</div>
        <div class="name-meaning">
          <h3>名字含义:</h3>
          <p>{{ name.meaning }}</p>
        </div>
        <button 
          @click="toggleFavorite(index)" 
          :class="['favorite-btn', { 'is-favorite': name.isFavorite }]"
        >
          <i :class="['fas', name.isFavorite ? 'fa-heart' : 'fa-heart-o']"></i>
        </button>
      </div>
    </div>

    <div v-if="favorites.length" class="favorites-section">
      <h2>收藏的名字</h2>
      <div v-for="(fav, index) in favorites" :key="index" class="favorite-name">
        {{ fav.fullName }}
        <button @click="removeFavorite(index)" class="remove-btn">
          <i class="fas fa-trash"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      surname: '',
      gender: 'male',
      generatedNames: [],
      favorites: [],
      nameCharacters: {
        male: [
          {char: '明', meaning: '光明、清晰', score: 88},
          {char: '华', meaning: '繁荣、美好', score: 85},
          {char: '德', meaning: '品德、道德', score: 90},
          {char: '志', meaning: '意志、理想', score: 87},
          {char: '文', meaning: '文雅、文化', score: 86},
          {char: '雅', meaning: '优雅、高尚', score: 88},
          {char: '宇', meaning: '宇宙、空间', score: 89},
          {char: '轩', meaning: '高大、气宇轩昂', score: 86},
          {char: '浩', meaning: '广大、浩瀚', score: 87},
          {char: '天', meaning: '自然、天空', score: 85},
          {char: '博', meaning: '博大、渊博', score: 88},
          {char: '远', meaning: '深远、长久', score: 84}
        ],
        female: [
          {char: '婷', meaning: '优雅、亭亭玉立', score: 90},
          {char: '雅', meaning: '优雅、高尚', score: 88},
          {char: '芳', meaning: '芬芳、美好', score: 86},
          {char: '美', meaning: '美丽、美好', score: 85},
          {char: '静', meaning: '安静、沉稳', score: 87},
          {char: '淑', meaning: '贤淑、温柔', score: 89},
          {char: '惠', meaning: '聪慧、智慧', score: 88},
          {char: '珍', meaning: '珍贵、宝贵', score: 86},
          {char: '莲', meaning: '纯洁、高雅', score: 85},
          {char: '月', meaning: '明月、温柔', score: 87},
          {char: '香', meaning: '芳香、优雅', score: 86},
          {char: '玉', meaning: '美玉、高洁', score: 88}
        ]
      }
    }
  },
  methods: {
    generateName() {
      if (!this.surname) {
        alert('请输入姓氏');
        return;
      }
      
      this.generatedNames = [];
      // 生成3个名字建议
      for (let i = 0; i < 3; i++) {
        const firstChar = this.getRandomChar();
        const secondChar = this.getRandomChar();
        
        const name = {
          characters: firstChar.char + secondChar.char,
          meaning: `${firstChar.char}: ${firstChar.meaning}\n${secondChar.char}: ${secondChar.meaning}`,
          score: Math.floor((firstChar.score + secondChar.score) / 2),
          isFavorite: false
        };
        
        this.generatedNames.push(name);
      }
    },
    
    getRandomChar() {
      const chars = this.nameCharacters[this.gender];
      return chars[Math.floor(Math.random() * chars.length)];
    },
    
    toggleFavorite(index) {
      const name = this.generatedNames[index];
      name.isFavorite = !name.isFavorite;
      
      if (name.isFavorite) {
        this.favorites.push({
          fullName: this.surname + name.characters,
          meaning: name.meaning
        });
      }
    },
    
    removeFavorite(index) {
      this.favorites.splice(index, 1);
    }
  },
  
  created() {
    // 从本地存储加载收藏的名字
    const savedFavorites = localStorage.getItem('favorites');
    if (savedFavorites) {
      this.favorites = JSON.parse(savedFavorites);
    }
  },
  
  watch: {
    favorites: {
      handler(newFavorites) {
        // 保存收藏到本地存储
        localStorage.setItem('favorites', JSON.stringify(newFavorites));
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.name-generator {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: 'Microsoft YaHei', sans-serif;
}

.input-section {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.surname-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 120px;
}

.gender-select {
  display: flex;
  gap: 15px;
}

.generate-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #45a049;
}

.name-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px 0;
  position: relative;
}

.name-display {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}

.name-score {
  color: #ff6b6b;
  font-size: 18px;
  margin: 10px 0;
}

.name-meaning {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  text-align: left;
  margin: 10px 0;
}

.favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  color: #ff6b6b;
  cursor: pointer;
}

.favorite-btn.is-favorite {
  color: #ff0000;
}

.favorites-section {
  margin-top: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.favorite-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.remove-btn {
  background: none;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  padding: 5px;
}

.remove-btn:hover {
  color: #ff0000;
}

@media (max-width: 600px) {
  .input-section {
    flex-direction: column;
  }
  
  .surname-input {
    width: 100%;
    max-width: 200px;
  }
}
</style>
